<template>
  <section class="auto-scroll-group">
    <div class="auto-scroll-box">
      <div class="head-table">
        <el-table class="hidden-tbody yt-table" style="width: 100%;" border size="mini">
          <el-table-column prop="alarmName" label="名称" :resizable="false"></el-table-column>
          <el-table-column prop="alarmText" label="内容" :resizable="false"></el-table-column>
          <el-table-column prop="levelStr" label="等级" width="80px" :resizable="false"></el-table-column>
          <el-table-column prop="alarmTypeNmae" label="类型" width="80px" :resizable="false"></el-table-column>
          <el-table-column prop="clearStr" label="清除标志" width="80px" :resizable="false"></el-table-column>
          <el-table-column prop="alarmTimeStr" label="发生时间" width="90px" :resizable="false"></el-table-column>
        </el-table>
      </div>

      <vue-seamless-scroll :data="list" class="auto-scorll-table" :class-option="defaultOption">
        <el-table
            :data="list"
            class="custom-table-2 hidden-thead yt-table"
            border
            :row-class-name="rowClassName">
          <el-table-column prop="alarmName" label="名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="alarmText" label="内容" show-overflow-tooltip></el-table-column>
          <el-table-column prop="levelStr" label="等级" width="80px"></el-table-column>
          <el-table-column prop="alarmTypeNmae" label="类型" width="80px"></el-table-column>
          <el-table-column prop="clearStr" label="清除标志" width="80px"></el-table-column>
          <el-table-column prop="alarmTimeStr" label="发生时间" width="90px"></el-table-column>
        </el-table>
      </vue-seamless-scroll>
    </div>
  </section>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {vueSeamlessScroll},
  name: "AutoScrollTable",
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        // limitMoveNum: 2, // 开始无缝滚动的数据量 this.list.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 这里要变成你的一行表格的高度 可以审查元素
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  methods: {
    rowClassName({row, rowIndex}) {
      if (row.alarmLevel === 1) {
        return 'text-color-red'
      } else if (row.alarmLevel === 2) {
        return 'text-color-orange'
      } else if (row.alarmLevel === 3) {
        return 'text-color-yellow'
      } else if (row.alarmLevel === 4) {
        return 'text-color-blue'
      }
    }
  }
}
</script>

<style scoped lang="less">
  @red: #ff5757;
  @yellow: yellow;
  @orange: #f7903d;
  @blue: #2aef8a;
  @gray: gray;
  .auto-scroll-group {
    height: 100%;
    overflow: hidden;
    border-bottom: 1px solid #216892;
    position: relative;
    z-index: 1;

    .auto-scroll-box {
      height: 100%;
      overflow: hidden;
      z-index: 1;
      position: relative;

      .empty-table {
        height: calc(100% - 32px);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 12px;
      }
    }

    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      border: 1px solid #216892;
      z-index: 0;
    }
  }

  .head-table {
    height: 36px;
  }

  .hidden-tbody {
    /deep/ &.el-table {
      height: 100%;

      th {
        background-color: transparent !important;
      }

      .cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &:before {
        /*display: none;*/
      }
    }

    /deep/ &.el-table tbody { //隐藏上面表格的tbody
      display: none;
      overflow: hidden;
    }
  }

  .auto-scorll-table {
    height: calc(100% - 36px);
    overflow: hidden;
  }

  .hidden-thead {
    /deep/ &.el-table {
      border-top: none; //防止边框重叠

      .cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .text-color-red {
        .cell {
          color: @red !important;
        }
      }

      .text-color-orange {
        .cell {
          color: @orange !important;
        }
      }

      .text-color-yellow {
        .cell {
          color: @yellow !important;
        }
      }

      .text-color-blue {
        .cell {
          color: @blue !important;
        }
      }
    }

    /deep/ &.el-table thead { //隐藏下面表格的thead
      display: none;
      overflow: hidden;
    }
  }
</style>